@import './theme.scss';

.sidebar-container {
  // width: $sideBarWidth !important;
  background-image: $sidebarBackground;
  background-size: 100% 100%;
  height: calc(100% - 0rem);
  font-size: 0;
  overflow: hidden;

  .el-scrollbar__wrap {
    overflow-y: auto;
    position: absolute !important;
  }

  // reset element-ui css
  .horizontal-collapse-transition {
    transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
  }

  .scrollbar-wrapper {
    width: 100%;
    overflow-x: hidden !important;
  }

  .el-scrollbar__bar.is-vertical {
    right: 0px;
  }

  .el-scrollbar {
    height: 100%;
  }

  &.has-logo {
    .el-scrollbar {
      height: calc(100% - 50px);
    }
  }

  .is-horizontal {
    display: none;
  }

  a {
    display: inline-block;
    width: 100%;
    overflow: hidden;
  }

  .svg-icon {
    margin-right: 16px;
  }

  .sub-el-icon {
    margin-right: 12px;
    margin-left: -2px;
    margin-top: -2px;
  }

  .el-menu {
    border: none;
    height: 100%;
    width: 100% !important;
  }

  .el-submenu__title {
    font-size: $menuTextFontSize !important;
  }

  // menu hover
  .submenu-title-noDropdown,
  .el-submenu__title {
    &:hover {
      background-color: $menuHover !important;
    }
  }

  .el-submenu__icon-arrow {
    color: $menuActiveText !important;
  }

  .is-active {
    &>.el-submenu__title {
      font-size: $menuTextFontSize !important;
      background-color: $menuActive !important;
      color: $menuActiveText !important;

      &>.el-submenu__icon-arrow {
        color: $menuActiveText !important;
      }
    }
  }


  & .nest-menu .el-submenu>.el-submenu__title,
  & .el-submenu .el-menu-item {
    min-width: $sideBarWidth !important;
    background-color: $subMenuBg !important;
    font-size: $subMenuTextFontSize;

    &:hover {
      background-color: $subMenuHover !important;
    }
  }

  & .el-submenu .el-menu-item.is-active {
    background-color: $subMenuActive !important;
  }

}

.scrollbar-wrapper {
  overflow-x: hidden !important;
}

.el-menu--vertical {
  .nest-menu {
    background: $rightMenuBg;
  }
}

//sidebar缩进时
.hideSidebar {
  .el-submenu {
    &>.el-submenu__title {
      .el-submenu__icon-arrow {
        display: none;
      }

      &>span {
        display: none;
      }
    }
  }
}

.indentation {
  background: $indentationBg;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10px;
}

.icolor {
  color: $indentationIconColor;
  height: 50px;
  background: rgba(0, 0, 0, 0.12);
  width: 100%;
  display: flex !important;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}